<!--
 * @Author: chenwll chenwell1025@163.com
 * @Date: 2024-11-01 09:14:06
 * @LastEditors: chenwll chenwell1025@163.com
 * @LastEditTime: 2024-12-04 10:37:19
 * @FilePath: \mms-web-usere:\chenwllCode\select-com\src\view\selectTableView\index.vue
 * @Description: 
-->
<template>
  <div>
    <h3>下拉表格筛选组件</h3>
    <selectTable
      :value="value"
      :table="table"
      :columns="table.columns"
      :border="false"
      :max-height="400"
      :selectWidth="300"
      :tableWidth="550"
      @remote-method="remoteMethod"
      :isShowFirstColumn="false"
      :keywords="{ label: 'factoryModelIdLabel', value: 'id' }"
      @page-change="pageChange"
      @radioChange="radioChange"
      isShowPagination
    ></selectTable>
    
  </div>
</template>

<script>
import data from '../../assets/data.json'
import data1 from '../../assets/data1.json'
import selectTable from '../../components/selectTable.vue'
export default {
  name: 'selectTableView',
  components: {
    selectTable,
  },
  data() {
    return {
      value: "",
      table: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        data: [],
        columns: [
          { prop: 'factoryModelIdLabel', label: '工厂', minWidth: '100' },
          { prop: 'materialTypeLabel', label: '物料分类', minWidth: '80' },
          { prop: 'materialCode', label: '物料编码', minWidth: '100' },
          { prop: 'materialName', label: '物料名称', minWidth: '160' },
        ],
      },
    }
  },
  created() {
    this.getList(1)
  },
  methods: {
    async remoteMethod(val) {
      console.log('下拉表格输入--------》', val);
      let res = Math.random() > 0.5 ? await  data : await data1
      setTimeout(() => {
        this.table.data = res.data.records
      },500)
      console.log(this.table.data);

    },
    radioChange(val) {
      console.log('单选--返回选中的数据', val)
    },
    // 获取当前的页码
    pageChange(val) {
      console.log('获取当前的页码', val)
      this.table.currentPage = val
      this.getList(this.table.currentPage)
    },
    async getList(pageNum) {
      let res
      if (pageNum === 1) {
        res = await data
      } else {
        res = await data1
      }
      if (res.success) {
        this.table.data = res.data.records
        this.table.total = res.data.total
      }
    },
  },
}
</script>
